<template>
<el-container>
  <el-main>
    <div class="block">
      <el-input placeholder="按用户名查询" v-model="username" style="width: 200px" clearable/>
      <el-button type="primary" round @click="logSearchBtn">查询</el-button>
    </div>
    <br>
    * 输入账号点击查询
    <br>
    <el-form v-for="o in onlineList" label-width="80px" style="float: left">
      <el-form-item label="用户账号">
        {{o.username}}
      </el-form-item>
      <el-form-item label="在线状态">
        {{o.status ? '在线' : '离线'}}
      </el-form-item>
      <el-form-item label="登录类型">
        {{o.type}}
      </el-form-item>
      <el-form-item label="登录时间">
        {{o.loginExp}}
      </el-form-item>
      <el-form-item label="操作">
        <el-button type="danger" @click="deleteOnline(o)" round v-if="o.status">踢其下线</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</el-container>
</template>

<script>
import { onlineUser, deleteOnline } from '@/api/user'
export default {
  name: "UserOnline",
  data() {
    return {
      username: '',
      onlineList: []
    }
  },
  methods: {
    logSearchBtn(){
      onlineUser({username: this.username}).then(res => {
        this.onlineList = res.data.data
        if (res.data.data.length === 0){
          this.$notify.info({
            title: '温馨提示',
            message: this.username + "：此账号，没有在线设备"
          });
        }
      })
    },
    deleteOnline(e){
      this.$confirm('确定将账号 '+e.username+' 登录设备类型：'+e.type+' 下线, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOnline(e).then(res => {
          const  data = []
          this.onlineList.forEach(function(value, index, array) {
              if (value.type !== e.type){
                data.push(value)
              }
          })
          this.onlineList = data
          this.$notify.info({
            title: '温馨提示',
            message: res.data.msg
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  }
}
</script>
